<template>
  <div>
      <div class="pro-main">
          <div class="pro-view" >
              <div class="smoImg" v-for='item in smoImgList' :key='item.id' @click="pushid(item)">
                  <img :src="item.path" alt="" >
              </div>
              
          </div>
          <div class="bigImg">
                <img :src="bigImg" alt="" >
          </div>
          <div class="pro-infos">
              <div class="desc">
                  {{msg.desc}}
              </div>
              <p>
                  {{msg.name}}
              </p>
              <p class="price">
                  ￥{{msg.price}}.00
              </p>
              <div class="buy">
                  <div class="ico" @click="getColor">
                      <img :src="smoImgList[0].path" alt="">
                  </div>
                  <div>
                      <div>
                          <p>尺码：</p>
                          <div></div>
                      </div>
                      <div>
                          <p>数量：</p>
                          <div></div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import {getGoods} from '../assets/request'
export default {
    data(){
        return{
            pics:'',
            bigImg:'',
            msg:{}
        }
    },
    async created(){
        let res = await getGoods(this.$route.params.id)
        console.log(res);
        this.pics=res.s_goods_photos
        this.bigImg = res.s_goods_photos[0].path
        this.msg=res
        
    },
    computed:{
        smoImgList(){
            let arr = this.pics
            return arr
        }
    },
    methods:{
        pushid(item){
             this.bigImg= item.path
        },
        getColor(){

        }
    }
}
</script>

<style lang='scss' scoped>
    .pro-main{
        width: 1280px;
        height: 645px;
        margin: 20px auto;
        // background-color:pink;
        display: flex;
        .pro-view{
            width: 50px;
            height: 100%;
            .smoImg{
                width: 50px;
                height: 50px;
                border: 1px solid gray;
                margin: 5px auto;
                img{
                    width: 48px;
                    height: 48px;
                }
            }
        }
        .bigImg{
            width: 643px;
            height: 643px;
            border: 1px solid gray;
            margin-left: 15px;
            
            
            &>img{
                width: 100%;
                height: 100%;
                transition: .5s;
            }
            img[src=""],img:not([src]){
                opacity:0;
            }
        }
        .pro-infos{
            width: 540px;
            height: 645px;
            padding-left: 45px;
            .desc{
                font-size: 25px;
                line-height: 40px;
                text-align: left;
                color: black;
            }
            p{
                text-align: left;
                font-size: 15px;
                color: #999;
                line-height: 25px;
            }
            .price{
                font-size: 22px;
                color: #000;
                font-weight: 600;
                line-height: 30px;
                margin: 15px 0;
            }
        }
        .ico{
            width: 84px;
            height: 84px;
            border: 1px solid gray;
            &>img{
                width: 100%;
                height: 100%;
            }
        }
    }
</style>